<template>
     <div class="stuPage">
        <div class="toolsBar">
            <nuxt-link to="/stuPage/stuDataPage">
              <a-icon type="home"　theme="twoTone" two-tone-color="#8e96cc"/>   
            </nuxt-link>
            <h3>DormSpace</h3>
            <a-dropdown placement="bottomRight">
                <a-button ghost style="padding:0;border:0;margin-top:6px;margin-left:160px">
                    <a-avatar style="backgroundColor:#94b6fa" icon="user"/></a-badge>
                </a-button>
            </a-dropdown>
        </div>
        <div>
            <a-form layout="inline" :form="form" @submit="handleSubmit">
              <a-form-item :validate-status="userNameError() ? 'error' : ''" :help="userNameError() || ''">
                <a-input
                  v-decorator="[
                    'userName',
                    { rules: [{ required: true, message: 'Please input your username!' }] },
                  ]"
                  placeholder="Username"
                >
                  <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
                </a-input>
              </a-form-item>
              <a-form-item :validate-status="passwordError() ? 'error' : ''" :help="passwordError() || ''">
                <a-input
                  v-decorator="[
                    'password',
                    { rules: [{ required: true, message: 'Please input your Password!' }] },
                  ]"
                  type="password"
                  placeholder="Password"
                >
                  <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                </a-input>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" html-type="submit" :disabled="hasErrors(form.getFieldsError())">
                  Log in
                </a-button>
              </a-form-item>
            </a-form>
        </div>
    </div>
</template>

<script>
function hasErrors(fieldsError) {
  return Object.keys(fieldsError).some(field => fieldsError[field]);
}
export default {
    layout: "stuLayout",
    data(){
        return {
            hasErrors,
            form: this.$form.createForm(this, { name: 'horizontal_login' }),
        };
    },
    mounted() {
    this.$nextTick(() => {
      // To disabled submit button at the beginning.
      this.form.validateFields();
    });
  },
  methods: {
    // Only show error after a field is touched.
    userNameError() {
      const { getFieldError, isFieldTouched } = this.form;
      return isFieldTouched('userName') && getFieldError('userName');
    },
    // Only show error after a field is touched.
    passwordError() {
      const { getFieldError, isFieldTouched } = this.form;
      return isFieldTouched('password') && getFieldError('password');
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },
  },
}
</script>

<style lang="scss" scoped>
.aButton{ 
  color: #efe7db !important;
  border-radius: 8px;
  border: 3px solid #efe7db;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  top:1px;
  left:50px;
  background-color:rgba(89,242,130, 0.78);
}
i{
    width:35px;
    height:35px;
    font-size:25px;
    padding: 10px;
    margin-left: 2%;
}
h3{
    color: #fefefe;
    padding: 10px;
    margin: 0;
}
.stuPage{
    width:360px;
    height: 780px;
    margin-left: 38%;
    margin-top: 0.5%;
    display: block;
    border: 2px solid grey;
    background: black;
    border-radius: 15px;
    padding: 3px;
    padding-top: 5px;
    .toolsBar{
        background-color: #2a2f55;
        box-shadow: 0 0 2px 0 #121633;
        border: 1px solid grey;
        border-bottom: 0;
        border-radius: 10px 10px 0 0 ;
        width: 100%;
        height: 6%;
        display: flex;
    }
    .dataPart{
        width: 100%;
        height: 94%;
        background-color: #191e3f;
        border: 1px solid grey;
        border-top: 0;
        border-radius:  0 0 10px 10px;
        overflow-y:scroll;
        display: inline-block;
        .myCard{
            background-color: #2a2f55;
            box-shadow: 0 0 2px 0 #121633;
            width: 48%;
            height: 220px;
            margin: 3px;
            float: left;
            display: flex;
        }
    }    
}
</style>

